<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>YouTube Subtitle Summarizer</title>
  <link rel="stylesheet" href="sidepanel.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>YouTube Subtitle Summarizer</h1>
      <div class="header-buttons">
        <button id="minimize-btn" class="icon-btn" title="Minimize">⟨</button>
        <button id="expand-btn" class="icon-btn" title="Expand">⟩</button>
        <button id="close-btn" class="icon-btn" title="Close">×</button>
      </div>
    </div>
    
    <div id="status-message" class="status-message"></div>
    
    <div class="sidebar">
      <div class="sidebar-buttons">
        <button id="chat-btn" class="sidebar-btn active" title="Chat">
          <span class="icon">💬</span>
          <span class="label">聊天</span>
        </button>
        <button id="settings-btn" class="sidebar-btn" title="Settings">
          <span class="icon">⚙️</span>
          <span class="label">设置</span>
        </button>
      </div>
    </div>
    
    <div class="main-content">
      <div class="action-buttons">
        <button id="extract-btn" class="primary-btn">Extract Subtitles</button>
      </div>
      
      <div class="video-info">
        <div class="video-title" id="video-title"></div>
        <div class="video-channel" id="video-channel"></div>
      </div>
      
      <div class="chat-container">
        <div id="chat-messages" class="chat-messages"></div>
        
        <div class="chat-input-container">
          <textarea id="chat-input" class="chat-input" placeholder="输入消息..." rows="4"></textarea>
          <div class="input-buttons">
            <button id="send-message-btn" class="send-message-btn" disabled>
              <span class="send-icon">↑</span>
            </button>
          </div>
        </div>
        <div class="input-hint">按 Shift + Enter 发送</div>
      </div>
    </div>
    
    <div class="settings-panel" style="display: none;">
      <h2>AI Settings</h2>
      <div class="settings-form">
        <div class="form-group">
          <label for="ai-provider">AI Provider:</label>
          <select id="ai-provider">
            <option value="ollama">Ollama</option>
            <option value="openai">OpenAI Compatible</option>
          </select>
        </div>
        
        <div class="form-group" id="ollama-settings">
          <label for="ollama-url">Ollama URL:</label>
          <input type="text" id="ollama-url" placeholder="http://localhost:11434" value="http://localhost:11434">
          
          <label for="ollama-model">Model:</label>
          <input type="text" id="ollama-model" placeholder="llama2" value="llama2">
        </div>
        
        <div class="form-group" id="openai-settings" style="display: none;">
          <label for="openai-url">API URL:</label>
          <input type="text" id="openai-url" placeholder="https://api.openai.com/v1" value="https://api.openai.com/v1">
          
          <label for="openai-key">API Key:</label>
          <input type="password" id="openai-key" placeholder="Your API key">
          
          <label for="openai-model">Model:</label>
          <input type="text" id="openai-model" placeholder="gpt-3.5-turbo" value="gpt-3.5-turbo">
        </div>
        
        <div class="form-group">
          <label for="custom-prompt">Custom Prompt:</label>
          <textarea id="custom-prompt" placeholder="Enter your custom prompt here. Use {transcript} as a placeholder for the video transcript." rows="4">Please provide a comprehensive summary of the following YouTube video transcript. Focus on the main topics, key points, and important takeaways:

{transcript}</textarea>
        </div>
        
        <button id="save-settings" class="primary-btn">Save Settings</button>
      </div>
    </div>
  </div>
  
  <script src="sidepanel.js"></script>
</body>
</html> 